<template>
  <div class="group-detail-container">
    <div class="group-detail">
      <!-- 返回按钮 -->
      <div class="back-button" @click="goBack">
        <i class="fas fa-arrow-left"></i>
        <span>返回小组列表</span>
      </div>

      <div class="main-content">
        <!-- 小组头部信息 -->
        <div class="group-header">
          <div v-if="loading.group" class="loading-container">
            <div class="loading-spinner"></div>
            <p>加载中...</p>
          </div>
          <template v-else>
            <div class="group-basic-info">
              <div class="group-name-circle large">{{ group.name }}</div>
              <div class="group-title">
                <h1>{{ group.name }}</h1>
                <div class="group-stats">
                  <span><i class="fas fa-users"></i> {{ group.memberCount !== undefined ? group.memberCount : 0 }}名成员</span>
                  <span><i class="fas fa-code"></i> {{ group.problemCount !== undefined ? group.problemCount : 0 }}道题目</span>
                </div>
              </div>
            </div>
            <div class="group-actions">
              <button v-if="isAdmin" class="manage-btn" @click="goToManage">
                <i class="fas fa-cog"></i> 管理小组
              </button>
            </div>
          </template>
        </div>

        <!-- 导航标签页 -->
        <div class="nav-tabs">
          <button 
            v-for="tab in tabs" 
            :key="tab.key"
            :class="['tab-btn', { active: currentTab === tab.key }]"
            @click="currentTab = tab.key"
          >
            <i :class="tab.icon"></i> {{ tab.name }}
          </button>
        </div>

        <!-- 内容区域 -->
        <div class="tab-content">
          <!-- 题目列表 -->
          <div v-if="currentTab === 'problems'" class="problems-list">
            <div class="content-header">
              <h2>题目列表</h2>
              <div class="problem-actions">
                <div class="search-box">
                  <i class="fas fa-search"></i>
                  <input type="text" placeholder="搜索题目..." v-model="problemSearch">
                </div>
                <div class="filter-group">
                  <label>难度</label>
                  <select v-model="problemFilter" class="filter-select">
                    <option value="all">全部难度</option>
                    <option value="easy">简单</option>
                    <option value="medium">中等</option>
                    <option value="hard">困难</option>
                  </select>
                </div>
                <button v-if="isAdmin" class="add-btn" @click="showAddProblemDialog">
                  <i class="fas fa-plus"></i> 添加题目
                </button>
              </div>
            </div>
            <div v-if="loading.problems" class="loading-container">
              <div class="loading-spinner"></div>
              <p>加载中...</p>
            </div>
            <div v-else-if="problems.length === 0" class="empty-state">
              <i class="fas fa-code"></i>
              <p>暂无题目</p>
              <p class="empty-description">该小组还没有题目，请添加第一道题目</p>
              <button v-if="isAdmin" class="add-btn empty-add-btn" @click="showAddProblemDialog">
                <i class="fas fa-plus"></i> 添加第一道题目
              </button>
            </div>
            <div v-else-if="filteredProblems.length === 0" class="no-results">
              <i class="fas fa-search"></i>
              <p>没有找到匹配的题目</p>
              <button class="clear-filter-btn" @click="clearFilters">
                清除筛选条件
              </button>
            </div>
            <div v-else class="problem-items">
              <div class="results-count" v-if="problems.length > 0">
                显示 <span class="count-highlight">{{ filteredProblems.length }}</span> / {{ problems.length }} 个题目
              </div>
              <div class="debug-info" style="background: #f0f0f0; padding: 10px; margin-bottom: 15px; border-radius: 5px; font-size: 12px; display: none;">
                <p>调试信息</p>
                <p>题目数量: {{ problems.length }}</p>
                <p>第一道题目: {{ problems[0] ? JSON.stringify(problems[0]) : '无' }}</p>
              </div>
              
              <!-- 表格式题目列表 -->
              <div class="problems-table">
                <table>
                  <thead>
                    <tr>
                      <th class="id-col">#</th>
                      <th class="title-col">题目</th>
                      <th class="difficulty-col">难度</th>
                      <th class="acceptance-col">通过率</th>
                      <th class="date-col">创建日期</th>
                      <th class="action-col">操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="problem in filteredProblems" :key="problem.id" class="problem-row">
                      <td class="id-col">{{problem.id}}</td>
                      <td class="title-col">{{problem.title}}</td>
                      <td class="difficulty-col">
                        <span :class="['difficulty-tag', problem.difficulty]">
                          {{getDifficultyText(problem.difficultyOriginal || problem.difficulty)}}
                        </span>
                      </td>
                      <td class="acceptance-col">{{problem.acceptanceRate || 0}}%</td>
                      <td class="date-col">{{formatDate(problem.created_at)}}</td>
                      <td class="action-col">
                        <button class="solve-btn" @click.stop="solveProblem(problem.id)">
                          <i class="fas fa-code"></i> 开始解题
                        </button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>

          <!-- 任务列表 -->
          <div v-if="currentTab === 'tasks'" class="tasks-list">
            <div class="content-header">
              <h2>任务列表</h2>
              <button v-if="isAdmin" class="add-btn" @click="showCreateTaskDialog">
                <i class="fas fa-plus"></i> 创建任务
              </button>
            </div>
            
            <div v-if="loading.tasks" class="loading-container">
              <div class="loading-spinner"></div>
              <p>加载中...</p>
            </div>
            <div v-else-if="tasks.length === 0" class="empty-state">
              <i class="fas fa-tasks"></i>
              <p>暂无任务</p>
            </div>
            <div v-else class="task-items">
              <div v-for="task in tasks" :key="task.id" class="task-item">
                <div class="task-header">
                  <div class="task-title">
                    <h3>{{ task.title }}</h3>
                    <span :class="['task-status', task.status]">
                      {{ getStatusText(task.status) }}
                    </span>
                  </div>
                  <div class="task-meta">
                    <span class="deadline">
                      <i class="fas fa-clock"></i>
                      截止时间：{{ formatDate(task.deadline) }}
                    </span>
                    <span class="creator">
                      <i class="fas fa-user"></i>
                      创建人：{{ task.creator_name || '未知' }}
                    </span>
                  </div>
                </div>
                
                <p class="task-description">{{ task.description }}</p>
                
                <div class="task-progress">
                  <div class="progress-header">
                    <span>完成进度</span>
                    <span>{{ getCompletionRate(task) }}%</span>
                  </div>
                  <div class="progress-bar">
                    <div 
                      class="progress-fill"
                      :style="{ width: getCompletionRate(task) + '%' }"
                    ></div>
                  </div>
                </div>
                
                <div class="task-actions">
                  <button class="view-btn" @click="viewTaskDetail(task.id)">
                    <i class="fas fa-eye"></i> 查看详情
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- 成员列表 -->
          <div v-if="currentTab === 'members'" class="members-list">
            <div class="content-header">
              <h2>成员列表</h2>
              <div class="search-box">
                <i class="fas fa-search"></i>
                <input type="text" placeholder="搜索成员..." v-model="memberSearch">
              </div>
            </div>
            <div v-if="loading.members" class="loading-container">
              <div class="loading-spinner"></div>
              <p>加载中...</p>
            </div>
            <div v-else-if="members.length === 0" class="empty-state">
              <i class="fas fa-users"></i>
              <p>暂无成员</p>
            </div>
            <div v-else class="member-items">
              <div v-for="member in filteredMembers" :key="member.id" class="member-item">
                <img :src="member.avatar" :alt="member.name" class="member-avatar">
                <div class="member-info">
                  <h3>{{ member.name }}</h3>
                  <span class="member-role" :class="member.role">
                    {{ getRoleText(member.role) }}
                  </span>
                </div>
                <div class="member-stats">
                  <span><i class="fas fa-code"></i> 解题：{{ member.solvedCount }}</span>
                  <span><i class="fas fa-trophy"></i> 排名：{{ member.rank }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 创建任务对话框 -->
    <div class="dialog-overlay" v-if="showTaskDialog" @click="showTaskDialog = false">
      <div class="dialog-content" @click.stop>
        <div class="dialog-header">
          <h2>创建任务</h2>
          <button class="close-btn" @click="showTaskDialog = false">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="dialog-body">
          <form @submit.prevent="submitTaskForm" class="task-form">
            <div class="form-group">
              <label>任务标题</label>
              <input 
                type="text" 
                v-model="newTask.title" 
                placeholder="请输入任务标题"
                required
              >
            </div>
            <div class="form-group">
              <label>任务描述</label>
              <textarea 
                v-model="newTask.description" 
                placeholder="请输入任务描述"
                rows="4"
                required
              ></textarea>
            </div>
            <div class="form-group">
              <label>截止时间</label>
              <input 
                type="datetime-local" 
                v-model="newTask.deadline"
                required
              >
            </div>
            <div class="form-group">
              <label>指派成员</label>
              <div class="member-selection">
                <div 
                  v-for="member in members" 
                  :key="member.id"
                  :class="['member-option', { selected: isAssigneeSelected(member.userId) }]"
                  @click="toggleAssignee(member.userId)"
                >
                  <img :src="member.avatar" :alt="member.name">
                  <span>{{ member.name }}</span>
                </div>
              </div>
            </div>
            <div class="form-actions">
              <button type="button" class="cancel-btn" @click="showTaskDialog = false">
                取消
              </button>
              <button type="submit" class="submit-btn">
                创建任务
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { groupApi, taskApi } from '@/utils/api.js'
import { generateGroupAvatar } from '@/utils/helpers.js'

export default {
  name: 'GroupDetailView',
  data() {
    return {
      groupId: null,
      userId: parseInt(localStorage.getItem('userId')),
      isAdmin: false,
      group: {},
      loading: {
        group: true,
        members: false,
        problems: false,
        tasks: false
      },
      currentTab: 'problems',
      tabs: [
        { key: 'problems', name: '题目', icon: 'fas fa-code' },
        { key: 'tasks', name: '任务', icon: 'fas fa-tasks' },
        { key: 'members', name: '成员', icon: 'fas fa-users' }
      ],
      members: [],
      memberSearch: '',
      problems: [],
      problemSearch: '',
      problemFilter: 'all',
      tasks: [],
      showTaskDialog: false,
      newTask: {
        title: '',
        description: '',
        deadline: '',
        assignees: []
      },
      selectedAssignees: []
    }
  },
  computed: {
    filteredMembers() {
      return this.members.filter(member => 
        member.name && member.name.toLowerCase().includes(this.memberSearch.toLowerCase())
      )
    },
    filteredProblems() {
      // 先按难度过滤
      let result = this.problems;
      
      if (this.problemFilter !== 'all') {
        result = result.filter(problem => 
          problem.difficulty.toLowerCase() === this.problemFilter.toLowerCase()
        );
      }
      
      // 再按搜索关键词过滤
      if (this.problemSearch.trim() !== '') {
        const keyword = this.problemSearch.toLowerCase();
        result = result.filter(problem => 
          problem.title.toLowerCase().includes(keyword) || 
          (problem.description && problem.description.toLowerCase().includes(keyword))
        );
      }
      
      return result;
    }
  },
  created() {
    // 获取路由参数中的小组 ID
    this.groupId = parseInt(this.$route.params.id);
    
    // 加载小组信息
    this.fetchGroupData();
    
    // 加载成员列表
    this.fetchGroupMembers();
    
    // 根据当前标签页加载相应数据
    if (this.currentTab === 'problems') {
      this.fetchGroupProblems();
    } else if (this.currentTab === 'tasks') {
      this.fetchGroupTasks();
    }
  },
  watch: {
    currentTab(newValue) {
      if (newValue === 'problems' && this.problems.length === 0) {
        this.fetchGroupProblems();
      } else if (newValue === 'tasks' && this.tasks.length === 0) {
        this.fetchGroupTasks();
      } else if (newValue === 'members' && this.members.length === 0) {
        this.fetchGroupMembers();
      }
    }
  },
  methods: {
    // 获取小组基本信息
    async fetchGroupData() {
      this.loading.group = true;
      try {
        const response = await groupApi.getGroupDetail(this.groupId);
        if (response.result === 'success') {
          this.group = {
            ...response.group,
            avatar: generateGroupAvatar(response.group.name)
          };
          
          // 获取当前用户在小组中的角色
          this.fetchUserRole();
        } else {
          console.error('获取小组详情失败:', response.message);
        }
      } catch (error) {
        console.error('获取小组详情出错:', error);
      } finally {
        this.loading.group = false;
      }
    },
    
    // 获取当前用户在小组中的角色
    async fetchUserRole() {
      try {
        const response = await groupApi.getUserRole(this.groupId, this.userId);
        if (response.result === 'success') {
          this.isAdmin = response.isAdmin;
        } else {
          console.error('获取用户角色失败:', response.message);
        }
      } catch (error) {
        console.error('获取用户角色出错:', error);
      }
    },
    
    // 获取小组成员列表
    async fetchGroupMembers() {
      this.loading.members = true;
      try {
        const response = await groupApi.getGroupMembers(this.groupId);
        if (response.result === 'success' && response.members) {
          this.members = response.members
            .filter(member => member.status === 'approved')
            .map(member => ({
              id: member.id,
              userId: member.user_id,
              name: member.username,
              avatar: member.avatar || generateGroupAvatar(member.username),
              role: member.role,
              status: member.status,
              solvedCount: 0,
              rank: '-'
            }));
        } else {
          console.error('获取小组成员失败:', response.message);
          this.members = []; // 失败时设置为空数组
        }
      } catch (error) {
        console.error('获取小组成员出错:', error);
        this.members = []; // 出错时设置为空数组
      } finally {
        this.loading.members = false;
      }
    },
    
    // 获取小组任务列表
    async fetchGroupTasks() {
      this.loading.tasks = true;
      try {
        console.log("开始获取小组任务列表，小组ID:", this.groupId);
        const response = await taskApi.getGroupTasks(this.groupId);
        console.log("小组任务列表API响应:", response);
        
        if (response.result === 'success' && response.tasks && response.tasks.length > 0) {
          this.tasks = response.tasks.map(task => {
            console.log("处理任务数据:", task);
            
            // 检查创建者名称是否存在
            if (!task.creator_name && task.creator_id) {
              console.log("任务创建者名称为空，任务ID:", task.id, "创建者ID:", task.creator_id);
            }
            
            // 计算任务状态
            let status = 'ongoing';
            const now = new Date();
            const deadline = new Date(task.deadline);
            
            if (deadline < now) {
              status = 'expired';
            } else if (task.status === 'completed') {
              status = 'completed';
            }
            
            const processedTask = {
              id: task.id,
              title: task.title,
              description: task.description,
              deadline: task.deadline,
              status: status,
              createTime: task.created_at,
              creator_id: task.creator_id,
              creator_name: task.creator_name || '未知',
              assignments: task.assignments ? task.assignments.map(assignment => ({
                id: assignment.id,
                userId: assignment.user_id,
                name: assignment.username || '未知用户',
                avatar: generateGroupAvatar(assignment.username || '未知用户'),
                completed: assignment.completed
              })) : []
            };
            
            console.log("处理后的任务对象:", processedTask);
            return processedTask;
          });
          
          console.log("最终任务列表:", this.tasks);
        } else {
          console.error('获取小组任务失败:', response.message);
          this.tasks = []; // 确保在失败时设置为空数组
        }
      } catch (error) {
        console.error('获取小组任务出错:', error);
        this.tasks = []; // 确保在出错时设置为空数组
      } finally {
        this.loading.tasks = false;
      }
    },
    
    goToManage() {
      this.$router.push(`/group/${this.group.id}/manage`)
    },
    
    getRoleText(role) {
      const roles = {
        admin: '管理员',
        member: '成员'
      }
      return roles[role] || '成员'
    },
    
    solveProblem(problemId) {
      this.$router.push(`/problem/${problemId}`)
    },
    
    showAddProblemDialog() {
      // 跳转到题目上传页面，并传递小组ID参数
      this.$router.push({
        path: '/problem/upload',
        query: { group_id: this.groupId, group_name: this.group.name }
      });
    },
    
    showCreateTaskDialog() {
      // 初始化新任务对象
      this.newTask = {
        title: '',
        description: '',
        deadline: this.formatDateForInput(new Date(Date.now() + 86400000)), // 默认1天后
        assignees: []
      };
      this.selectedAssignees = [];
      this.showTaskDialog = true;
    },
    
    toggleAssignee(userId) {
      const index = this.selectedAssignees.indexOf(userId);
      if (index === -1) {
        // 添加
        this.selectedAssignees.push(userId);
      } else {
        // 移除
        this.selectedAssignees.splice(index, 1);
      }
    },
    
    isAssigneeSelected(userId) {
      return this.selectedAssignees.includes(userId);
    },
    
    getCompletionRate(task) {
      if (!task.assignments || task.assignments.length === 0) {
        return 0;
      }
      
      const completedCount = task.assignments.filter(a => a.completed).length;
      return Math.round((completedCount / task.assignments.length) * 100);
    },
    
    getStatusText(status) {
      const statusMap = {
        ongoing: '进行中',
        completed: '已完成',
        expired: '已过期'
      };
      return statusMap[status] || status;
    },
    
    formatDateForInput(date) {
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}T${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
    },
    
    // 提交任务表单
    async submitTaskForm() {
      console.log('开始提交任务表单', {
        groupId: this.groupId,
        title: this.newTask.title,
        selectedMembers: this.selectedAssignees
      });
      
      // 创建任务基本信息
      const taskData = {
        group_id: this.groupId,
        title: this.newTask.title,
        description: this.newTask.description,
        deadline: this.newTask.deadline,
        creator_id: this.userId,
        status: 'ongoing'
      };
      
      try {
        // 创建任务
        console.log('调用创建任务API:', taskData);
        const response = await taskApi.createTask(taskData);
        console.log('创建任务API响应:', response);
        
        if (response.result === 'success') {
          const taskId = response.task.id;
          console.log('任务创建成功，ID:', taskId);
          
          // 分配任务给选定成员
          for (const userId of this.selectedAssignees) {
            console.log('分配任务给用户:', userId);
            const assignResponse = await taskApi.assignTask(taskId, userId);
            console.log('分配任务响应:', assignResponse);
          }
          
          // 刷新任务列表
          console.log('刷新任务列表');
          await this.fetchGroupTasks();
          
          // 关闭对话框
          this.showTaskDialog = false;
          
          // 显示成功消息
          this.showMessage('success', '任务创建成功');
        } else {
          console.error('创建任务失败:', response.message);
          this.showMessage('error', '任务创建失败: ' + response.message);
        }
      } catch (error) {
        console.error('创建任务发生异常:', error);
        this.showMessage('error', '创建任务失败，请稍后重试');
      }
    },
    
    goBack() {
      this.$router.push('/groups')
    },
    
    getDifficultyClass(difficulty) {
      if (!difficulty) return 'unknown';
      
      const difficultyLower = difficulty.toLowerCase();
      const difficultyMap = {
        'easy': 'easy',
        'medium': 'medium',
        'hard': 'hard'
      };
      return difficultyMap[difficultyLower] || 'unknown';
    },
    
    getDifficultyText(difficulty) {
      if (!difficulty) return '未知';
      
      const difficultyLower = difficulty.toLowerCase();
      const difficultyMap = {
        'easy': '简单',
        'medium': '中等',
        'hard': '困难'
      };
      return difficultyMap[difficultyLower] || difficulty;
    },
    
    truncateDescription(description) {
      if (description.length > 100) {
        return description.slice(0, 100) + '...';
      }
      return description;
    },
    
    formatDate(dateString) {
      if (!dateString) return '未设置';
      const date = new Date(dateString);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
    },
    
    async fetchGroupProblems() {
      this.loading.problems = true;
      console.log('开始获取小组题库，小组ID:', this.groupId);
      try {
        // 使用新的正确API方法（无需userId）
        console.log('调用API: groupApi.getGroupProblemList2, 参数:', this.groupId);
        const response = await groupApi.getGroupProblemList2(this.groupId);
        console.log('API响应数据:', JSON.stringify(response));
        
        // 检查响应中是否有problems字段，如果没有则尝试problemList字段
        let problemsList = [];
        if (response.result === 'success') {
          if (response.problems && Array.isArray(response.problems)) {
            problemsList = response.problems;
            console.log('从response.problems获取题目列表');
          } else if (response.problemList && Array.isArray(response.problemList)) {
            problemsList = response.problemList;
            console.log('从response.problemList获取题目列表');
          } else {
            console.error('API响应中没有有效的题目数组:', response);
          }
          
          console.log('获取到题目数量:', problemsList.length);
          this.problems = problemsList;
          
          // 处理HTML格式的描述，去除HTML标签，处理difficulty
          this.problems.forEach((problem, index) => {
            console.log(`处理题目 #${index + 1}:`, problem.id, problem.title);
            
            // 处理描述中的HTML标签
            if (problem.description) {
              problem.description = problem.description.replace(/<[^>]*>/g, '');
            }
            
            // 统一difficulty格式
            if (problem.difficulty) {
              // 保留原始值，用于UI显示
              problem.difficultyOriginal = problem.difficulty;
              // 转换为小写，用于class映射
              problem.difficulty = problem.difficulty.toLowerCase();
              console.log(`题目难度: ${problem.difficultyOriginal} -> ${problem.difficulty}`);
            }
            
            // 添加创建者和创建时间的默认值（如果不存在）
            if (!problem.creator_name) {
              problem.creator_name = '未知用户';
              console.log('题目缺少创建者信息，设置默认值');
            }
            
            if (!problem.created_at) {
              problem.created_at = new Date().toISOString();
              console.log('题目缺少创建时间，设置默认值');
            }
            
            // 确保通过率有值，且格式化为数字
            if (problem.acceptanceRate !== undefined) {
              // 如果是字符串，转换为数字
              if (typeof problem.acceptanceRate === 'string') {
                problem.acceptanceRate = parseFloat(problem.acceptanceRate);
              }
              
              // 如果是NaN或负数，设为0
              if (isNaN(problem.acceptanceRate) || problem.acceptanceRate < 0) {
                problem.acceptanceRate = 0;
              }
              
              // 保留两位小数
              problem.acceptanceRate = Math.round(problem.acceptanceRate * 100) / 100;
            } else {
              problem.acceptanceRate = 0;
              console.log('题目缺少通过率信息，设置默认值');
            }
          });
          
          console.log('获取小组题库成功，处理后的数据:', this.problems);
        } else {
          console.error('获取小组题库失败:', response.message, response);
          this.problems = []; // 失败时设置为空数组
        }
      } catch (error) {
        console.error('获取小组题库出错:', error);
        this.problems = []; // 出错时设置为空数组
      } finally {
        this.loading.problems = false;
      }
    },
    
    clearFilters() {
      this.problemSearch = '';
      this.problemFilter = 'all';
    },
    
    viewTaskDetail(taskId) {
      // 导航到任务详情页面
      this.$router.push({
        path: `/task/${taskId}`,
        query: {
          groupId: this.groupId,
          isAdmin: this.isAdmin
        }
      });
    },
    
    showMessage(type, message) {
      // 实现显示消息的逻辑
      alert(message);
    }
  }
}
</script>

<style scoped>
.group-detail {
  min-height: 100vh;
  background: #f0f7ff;
  padding: 60px 20px 20px; /* 为返回按钮留出空间 */
  position: relative; /* 用于返回按钮定位 */
}

/* 移除左侧边距 */
.main-content {
  margin-left: 0; /* 移除原来的 margin-left: 60px */
  max-width: 1200px; /* 添加最大宽度 */
  margin: 0 auto; /* 居中显示 */
}

/* 添加返回按钮样式 */
.back-button {
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 8px 16px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: #4a5568;
  transition: all 0.3s ease;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.back-button:hover {
  background: #f8fafd;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.group-header {
  background: white;
  border-radius: 10px;
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(164, 208, 246, 0.15);
}

.group-basic-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.group-name-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #3498db;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  padding: 8px;
  text-align: center;
  word-break: break-all;
  line-height: 1.2;
}

.group-name-circle.large {
  width: 80px;
  height: 80px;
  font-size: 18px;
}

.group-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.group-title h1 {
  margin: 0 0 8px 0;
  color: #2c3e50;
}

.group-stats {
  display: flex;
  gap: 16px;
  color: #5b7b9a;
}

.manage-btn {
  padding: 8px 16px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-tabs {
  background: white;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 20px;
  display: flex;
  gap: 12px;
  box-shadow: 0 2px 12px rgba(164, 208, 246, 0.15);
}

.tab-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #5b7b9a;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tab-btn.active {
  background: #3498db;
  color: white;
}

.tab-content {
  background: white;
  border-radius: 10px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(164, 208, 246, 0.15);
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}

.content-header h2 {
  margin: 0;
  font-size: 20px;
  color: #2c3e50;
  font-weight: 600;
}

.problem-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-group label {
  color: #5b7b9a;
  font-size: 14px;
}

.filter-group select {
  padding: 8px 24px 8px 12px;
  border: 1px solid #e8f4ff;
  border-radius: 6px;
  color: #2c3e50;
  background: white;
}

.search-box {
  position: relative;
  width: 240px;
}

.search-box i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #5b7b9a;
  font-size: 14px;
}

.search-box input {
  width: 100%;
  height: 36px;
  padding: 0 12px 0 36px;
  border: 1px solid #e8f4ff;
  border-radius: 6px;
  font-size: 14px;
  background: white;
  transition: all 0.3s ease;
}

.filter-dropdown .filter-select {
  height: 36px;
  padding: 0 12px;
  border: 1px solid #e8f4ff;
  border-radius: 6px;
  font-size: 14px;
  background: white;
  color: #2c3e50;
  min-width: 120px;
}

.add-btn {
  height: 36px;
  padding: 0 16px;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.add-btn:hover {
  background: #3aa876;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(66, 185, 131, 0.2);
}

/* 题目列表样式 */
.problem-items {
  display: block;
  width: 100%;
}

/* 任务列表样式 */
.task-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.task-item {
  background: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(164, 208, 246, 0.15);
  transition: all 0.3s ease;
}

.task-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(164, 208, 246, 0.2);
}

.task-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.task-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.task-title h3 {
  margin: 0;
  color: #2c3e50;
  font-size: 18px;
  font-weight: 600;
}

.task-status {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.task-status.pending {
  background: #f0f7ff;
  color: #3498db;
}

.task-status.in_progress {
  background: #fdf6ec;
  color: #e6a23c;
}

.task-status.completed {
  background: #e8f6f1;
  color: #42b983;
}

.task-status.overdue {
  background: #fef0f0;
  color: #f56c6c;
}

.task-meta {
  display: flex;
  gap: 20px;
  color: #8da2b5;
  font-size: 14px;
}

.task-meta i {
  margin-right: 6px;
}

.deadline {
  color: #e6a23c;
}

.task-description {
  color: #5b7b9a;
  margin: 0 0 16px 0;
  line-height: 1.6;
  font-size: 14px;
}

.task-progress {
  margin-bottom: 16px;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
  color: #5b7b9a;
}

.progress-bar {
  height: 8px;
  background: #e8f4ff;
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: #42b983;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.task-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
}

.view-btn {
  padding: 8px 16px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.view-btn:hover {
  background: #2980b9;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(52, 152, 219, 0.2);
}

.problems-table {
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(164, 208, 246, 0.15);
  overflow: hidden;
  margin-top: 16px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 16px;
  text-align: left;
  border-bottom: 1px solid #e8f4ff;
}

th {
  background: #f8faff;
  color: #5b7b9a;
  font-weight: 500;
}

.problem-row:hover {
  background: #f8faff;
  cursor: pointer;
}

.id-col {
  width: 80px;
}

.title-col {
  min-width: 200px;
}

.difficulty-col {
  width: 100px;
}

.acceptance-col {
  width: 100px;
  text-align: center;
  color: #3498db;
  font-weight: 500;
}

.date-col {
  width: 120px;
}

.action-col {
  width: 120px;
}

.difficulty-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.difficulty-tag.easy {
  background: #e8f6f1;
  color: #42b983;
}

.difficulty-tag.medium {
  background: #fdf6ec;
  color: #e6a23c;
}

.difficulty-tag.hard {
  background: #fef0f0;
  color: #f56c6c;
}

.difficulty-tag.unknown {
  background: #f2f6fc;
  color: #909399;
}

.solve-btn {
  padding: 6px 12px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
}

.solve-btn:hover {
  background: #2980b9;
}

/* 成员列表样式 */
.member-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.member-item {
  background: #f8faff;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.member-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.member-role {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.member-role.admin {
  background: #fdf6ec;
  color: #e6a23c;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #3498db;
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 40px 20px;
  text-align: center;
  background: #f8faff;
  border-radius: 12px;
  border: 2px dashed #d1e4ff;
}

.empty-state i {
  font-size: 64px;
  color: #b0cff0;
}

.empty-state p {
  color: #5b7b9a;
  margin: 0;
  font-size: 18px;
}

.empty-add-btn {
  padding: 12px 24px;
  font-size: 16px;
  box-shadow: 0 4px 8px rgba(66, 185, 131, 0.2);
}

.empty-add-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(66, 185, 131, 0.3);
}

/* 对话框样式 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.dialog-content {
  background: white;
  border-radius: 10px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  overflow: hidden;
}

.dialog-header {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e8f4ff;
}

.dialog-header h2 {
  margin: 0;
  font-size: 18px;
}

.close-btn {
  background: none;
  border: none;
  color: #5b7b9a;
  cursor: pointer;
  font-size: 18px;
}

.dialog-body {
  padding: 16px;
  max-height: calc(80vh - 60px);
  overflow-y: auto;
}

/* 表单样式 */
.task-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  color: #2c3e50;
  font-weight: 500;
}

.form-group input,
.form-group textarea {
  padding: 8px 12px;
  border: 1px solid #e8f4ff;
  border-radius: 6px;
  font-size: 14px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
}

.cancel-btn {
  padding: 8px 16px;
  background: #f8faff;
  color: #5b7b9a;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.submit-btn {
  padding: 8px 16px;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

/* 成员选择样式 */
.member-selection {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-height: 200px;
  overflow-y: auto;
  padding: 8px;
  background: #f8faff;
  border-radius: 6px;
}

.member-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: white;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid #e8f4ff;
}

.member-option img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.member-option.selected {
  background: #e1f3d8;
  border-color: #67c23a;
}

.no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 30px 20px;
  text-align: center;
  background: #f8faff;
  border-radius: 12px;
  border: 1px solid #e8f4ff;
}

.no-results i {
  font-size: 48px;
  color: #b0cff0;
}

.no-results p {
  color: #5b7b9a;
  margin: 0;
  font-size: 16px;
}

.clear-filter-btn {
  padding: 8px 16px;
  background: #f0f7ff;
  color: #3498db;
  border: 1px solid #d1e4ff;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.clear-filter-btn:hover {
  background: #e1f0ff;
  color: #2980b9;
}

.results-count {
  color: #8da2b5;
  font-size: 13px;
  margin-bottom: 16px;
  text-align: right;
}

.count-highlight {
  color: #3498db;
  font-weight: 600;
}

.empty-description {
  color: #8da2b5;
  font-size: 14px;
  margin-top: 8px;
}
</style> 